
<template>
  <upload-excel
    :before-upload="beforeUpload"
    :on-success="onSuccess"
  />
</template>

<script>
// 引入工具函数
import { transExcelDataToSouceData } from '@/utils/excelData'
// 引入导入文件接口
import { importEmployee } from '@/api/employees'
export default {
  name: 'Import',
  methods: {
    beforeUpload(file) {
    //   console.log(file)
      //   可在该插件解析文件之前坐一个校验  文件大小size 文件类型 type
      // 当返回值为turn时触发下面的函数
      const size = file.size / 1024
      if (size > 10) {
        // 当文件大小大于10KB时, 校验失败  提示用户
        this.$message({
          type: 'warning',
          message: '文件大小不得超过10KB'
        })
        return false
      }
      return true
    },
    // 解析成功之后调用的函数
    // data的值是 {header:表头数据 数组, results:表格主体数据 对象数组}
    async onSuccess(data) {
      console.log(data)
      //   excel批量导入的本质:
      //    1. excel插件就是把excel表格文件解析成 js识别的数据类型
      //    2. 按照后端接口要求 把excel表格解析好的数据转换成要求的格式 发起请求就行
      await importEmployee(transExcelDataToSouceData(data.results))
      this.$router.back()
    }
  }
}
</script>
